<template>
	<view class="mine-order-tab" >
		<view  class="tab-title-all">
			<scroll-view scroll-x="true" class="scroll-item">
				<view :class="['tab-title-item',item.state?'active':''] " @click="$emit('changeState',item.id)" v-for="(item,index) in orderBarData" :key="item.id">
					{{item.text}}
					<template v-if="item.state">
							<text class="underline"></text>
					</template>
				</view>
			</scroll-view>
		</view>
		<template>
			  <view>
				  <view>
				  	<slot name="0"></slot>
				  	<slot name="1"></slot>
				  	<slot name="2"></slot>
				  	<slot name="3"></slot>
				  	<slot name="4"></slot>
				  	<slot name="5"></slot>
				  </view>
				 
			  </view>
		</template>
	</view>
</template>

<script>
	export default {
		name:"mineOrder",
		props:['orderBarData'],
		data() {
			return {
			}
		},
		methods:{
		}
	}
</script>

<style lang="scss" scoped>
.mine-order-tab{
	// width: 100vw;
	// height: 100vh;
	// background-color: #d3d3d3;
	.tab-title-all{
		height: 60rpx;
		white-space: nowrap;
		width: 100vw;
		.scroll-item{
			width: 100vw;
			.tab-title-item{
				width: 150rpx;
				text-align: center;
				display: inline-block;
				color: gray;
				&.active{
					color: #FF4F01;
					font-weight: 600;
					font-size: 16px;
					.underline{
						display: block;
						width: 50%;
						margin: 10rpx auto 0rpx;
						border: 2px solid #FF4F01;
						border-radius: 20rpx;
					}
				}
				
			}
		}
	}
	.slot-content{
		width: 100vw;
		height: 300rpx;
		background-color: red;
	}
}
</style>
